<template>
  <div class="edit-price-warpper">
    <el-form
      ref="ruleform"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-row class="radio-block">
        <el-form-item label="修改方式：" label-width="84">
          <el-radio-group v-model="form.edit_type" v-removeAriaHidden>
            <el-radio v-for="editItem in pageInfo.editTypeArr" :key="editItem.value" :label="editItem.value" :class="editItem.value === 1 ? 'editTypeTwo' : ''">
              {{ editItem.label }}
              <div v-if="editItem.value === 0" class="div-inline-block">
                <span>满两件 </span>
                <el-input v-model="form.discount" size="mini" placeholder="5-9.9" style="width: 100px; margin: 0 8px;" />
                <span>折</span>
              </div>
              <div v-if="editItem.value === 1" class="div-inline-block">
                <span>关闭满2件折扣。部分商品满2件折扣必填，请选择此类商品的处理方案</span>
                <el-select v-model="form.one_type" placeholder="请选择" class="one-type">
                  <el-option
                    v-for="item in pageInfo.oneTypeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div v-if="editItem.value === 2" class="div-inline-block">
                <span>直接设置折扣</span>
                <el-select v-model="form.two_type" placeholder="请选择" class="two-type">
                  <el-option
                    v-for="item in pageInfo.twoTypeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        editTypeArr: [
          {
            label: '方式1',
            value: 0
          },
          {
            label: '方式2',
            value: 1
          },
          {
            label: '方式3',
            value: 2
          }
        ],
        oneTypeArr: [
          {
            label: '跳过关闭',
            value: 0
          },
          {
            label: '统一设置为',
            value: 1
          }
        ],
        twoTypeArr: [
          {
            label: '使用最大折扣值',
            value: 0
          },
          {
            label: '使用推荐折扣值',
            value: 1
          },
          {
            label: '使用最小折扣值',
            value: 2
          }
        ]
      },
      form: {
        edit_type: 0,
        discount: '',
        one_type: 0,
        two_type: 0
      },
      rules: {}
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.edit-price-warpper {
  .radio-block {
    ::v-deep {
      .el-radio {
        display: block;
        margin-top: 12px;
        &:first-of-type {
          margin-top: 4px;
        }
      }
    }
  }
  .one-type::v-deep.el-select {
    margin-left: 12px;
    width: 120px;
  }
  .two-type::v-deep.el-select {
    margin-left: 8px;
    width: 240px;
  }
  .div-inline-block {
    display: inline-block;
    margin-left: 20px;
    color: #000;
  }
}
</style>
